<template>
	<view>
		<view class="card-container">
			<image :src="loginImageUrl" class="loginImage">
			</image>
			<image :src="loginImageSmallUrl" class="floating">
			</image>
	</view>
	<view class="button-container">
		<button class="login_button" bindtap="login" @click="getLoginRouter">点击开始旅途</button>
		<view class="checkbox">
			<label>
				<checkbox value="cb" checked="true" />我已阅读并同意《个人信息处理规则》
			</label>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loginImageUrl: '/static/image/login.jpg',
				loginImageSmallUrl: '/static/image/login_small.png'
			};
		},
		methods: {
			getLoginRouter() {
				uni.navigateTo({
					url: '/pages/userInfo/userInfo', // 目标页面的路径
					success() {
						console.log('跳转成功');
					},
					fail(err) {
						console.error('跳转失败', err);
					}
				});
			} 
		},
		}
</script>

<style lang="scss">
	page {
		height: 100%;
		display: flex;
		flex-direction: column;
		background-color: rgb(240, 243, 228);
	}

	.loginImage {
		height: 100%;
		border-radius: 5%;
		animation-name: loginImage;
		animation-duration: 2s;
		animation-fill-mode: forwards;
	}

	.card-container {
		border-radius: 3%;
		border: rgb(169, 231, 24) 1px solid;
		margin: 5% 10%;
		height: 450px;
		position: relative;
	}

	.floating {
		position: absolute;
		/* 设置绝对定位 */
		top: 70%;
		animation-name: floating;
		animation-duration: 8s;
		animation-fill-mode: forwards;
	}

	@keyframes loginImage {
		from {
			transform: scale(1.2);
		}

		to {
			transform: scale(1);
		}
	}

	@keyframes floating {
		from {
			transform: scale(1.1);
		}

		to {
			transform: scale(1);
		}
	}

	.button-container {
		margin-top: 110px;
		text-align: center;
		font-size: 14px;
		color: rgb(142, 177, 102);
	}

	.login_button {
		background: linear-gradient(45deg, #dcff9a 0%, #84eb81 99%, #c3d618 100%);
		color: rgb(126, 131, 125);
		border-radius: 10px;
	}

	.checkbox {
		padding: 20px;
	}
</style>